<template>
    <div style="height: 100%; width: 100%; position: relative">
        <div class="pagetop">
            <div style="height: 100%; width: 100%">
                <table border="0" style="width: 100%; font-size: 12px; white-space: nowrap; max-width: 1190px">
                    <tr>
                        <td align="right">生成日期</td>
                        <td>
                            <el-date-picker v-model="create_startdt" :clearable="false" type="datetime"
                                placeholder="选择日期" style="width: 100%" default-time="00:00:00"
                                value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
                        </td>
                        <td>至</td>
                        <td>
                            <el-date-picker v-model="create_enddt" type="datetime" :clearable="false" placeholder="选择日期"
                                style="width: 100%" default-time="23:59:59" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </td>
                        <td align="right">采样日期</td>
                        <td>
                            <el-date-picker v-model="collectSampleStartdt" :clearable="true" type="datetime"
                                placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%">
                            </el-date-picker>
                        </td>
                        <td>至</td>
                        <td>
                            <el-date-picker v-model="collectSampleenddt" type="datetime" :clearable="true"
                                placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%">
                            </el-date-picker>
                        </td>
                        <td align="right">病&nbsp;历&nbsp;号&nbsp;</td>
                        <td>
                            <el-input v-model="txtpatno" @keyup.enter.native="InitPage" @focus="txtfocus('reftxtpatno')"
                                ref="reftxtpatno" style="width: 150px">
                                <template slot="append">
                                    <el-button @click.native="BtnReadCard">读卡</el-button>
                                </template>
                            </el-input>
                        </td>
                        <td align="right">采样人所属工作组</td>
                        <td>
                            <el-select v-model="labgroupval" placeholder="" style="width:120px" @dblclick.native="popMultipleChk(labgroupval,'labgroupval',labgroupOption,'工作组选择')" filterable clearable>
                                <el-option v-for="(item,index) in labgroupOption" :key="index" :value="item.data" :label="item.display"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">条码编号</td>
                        <td colspan="3">
                            <el-input v-model="txtbarcode" style="width: 100%" @keyup.enter.native="InitPage"
                                @focus="txtfocus('reftxtbarcode')" ref="reftxtbarcode" clearable></el-input>
                        </td>
                        <td align="right">回单条码</td>
                        <td colspan="3">
                            <el-input v-model="back_txtbarcode" style="width: 100%" @keyup.enter.native="InitPage"
                                @focus="txtfocus('reftxtbackbarcode')" ref="reftxtbackbarcode" clearable></el-input>
                        </td>
                        <td align="right">标本类型</td>
                        <td>
                            <rm-ddl-common datatype="specimen" dataname="标本类型" :appendtobody="true" v-model="specimenval" width="150px"></rm-ddl-common>
                        </td>
                        <td align="right"></td>
                        <td>
                            <rm_AdvancedSearch :jsonObj="jsonObj" ref="rm_AdvancedSearch" @openDialog="openDialog"
                                @parentFunc="BtnQuery">
                            </rm_AdvancedSearch>
                        </td>
                    </tr>
                </table>
                <div class="operation-list">
                    <!-- <el-button @click.native="BtnPrint" class="btnStyle">打印</el-button>
                            <el-button @click.native="BtnJustify" class="btnStyle">调整</el-button>
                            <el-button @click.native="BtnPreView" class="btnStyle">预览</el-button> -->
                    <el-button @click.native="BtnQuery" class="btnStyle" v-has="'PINQUERY'" type="primary"
                        icon="el-icon-search">查询</el-button>
                    <el-button @click.native="BtnClear" class="btnStyle" icon="el-icon-close">清除</el-button>
                    <el-button @click.native="ShowSelectDialog" class="btnStyle" v-has="'PEXPORT'" icon="el-icon-download">导出</el-button>
                    <el-button @click.native="BtnRePrintBarcode" class="btnStyle" icon="el-icon-printer">重打条码
                    </el-button>
                    <el-button @click.native="BtnRePrintReceipt" class="btnStyle" icon="el-icon-tickets">重打回单
                    </el-button>
                    <el-button @click.native="BtnLookPic" class="btnStyle" icon="el-icon-picture">查看照片</el-button>
                    <el-button @click.native="BtnSamplingReceipt" class="btnStyle" icon="el-icon-document">采样回单
                    </el-button>
                </div>
            </div>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <rm-layout-left splitcolor="#F8F8FF" movingcolor="#00ff00" :splitwidth="0" :fixsize="0" :minfixsize="80"
                    :canDrag="false">
                    <rm-layout-right splitcolor="#F8F8FF" movingcolor="#0000ff" :splitwidth="5" :fixsize="500">
                        <template v-slot:fix>
                            <div class="middle-right">
                                <div style="height: 49%">
                                    <vxe-grid :columns="tableColumn2" height="auto" header-align="center" show-overflow
                                        :mouse-config="{ selected: true }" border :data.sync="tableData2"
                                        :select-config="selectConfig" show-header-overflow="tooltip" size="mini"
                                        @current-change="RightTopCurrentChangeEvent" highlight-current-row
                                        highlight-hover-row ref="xTable2" resizable stripe></vxe-grid>
                                </div>
                                <div style="height: 50%; margin-top: 2px">
                                    <vxe-grid :columns="tableColumn3" height="auto" header-align="center" show-overflow
                                        :mouse-config="{ selected: true }" border :data.sync="tableData3"
                                        :select-config="selectConfig" show-header-overflow="tooltip"
                                        @current-change="RightButtomCurrentChangeEvent" highlight-current-row
                                        highlight-hover-row ref="xTable3" resizable size="mini" stripe></vxe-grid>
                                </div>
                            </div>
                        </template>

                        <div style="height: 100%; width: 100%; position: relative">
                            <div class="pagemain">
                                <!-- <vxe-grid :columns="mainTableColumn" :height="!is_showselother?'auto':'100%'" header-align="center" show-overflow :cell-class-name="cellClassName" :data="mainTableData" :start-index="(tablePage.currentPage - 1) * tablePage.pageSize" :keyboard-local-config="keyLocalConfig" :mouse-config="{selected: true}" border :pager-config="tablePage" show-header-overflow="tooltip" :select-config="selectConfig" @current-change="CurrentChangeEvent" highlight-current-row highlight-hover-row ref="xTable1" resizable size="mini" stripe>
                                </vxe-grid> -->
                                <vxe-table :data="mainTableData"
                                    :select-config="{ tigger: 'row', checkMethod: checkMethod }"
                                    @select-change="SelectChange" @select-all="SelectAll" height="auto"
                                    :sort-config="{ trigger: 'cell' }" :keyboard-local-config="keyLocalConfig"
                                    @current-change="CurrentChangeEvent" highlight-current-row highlight-hover-row
                                    ref="xTable1" resizable highlight-hover-column border show-header-overflow="tooltip"
                                    :mouse-config="{ selected: true }" show-overflow="tooltip" header-align="center"
                                    :loading="loading" :cell-class-name="cellClassName"
                                    :start-index="(tablePage.currentPage - 1) * tablePage.pageSize" size="mini"
                                    width="100%">
                                    <vxe-table-column type="selection" width="40" header-align="center" align="center">
                                    </vxe-table-column>
                                    <vxe-table-column field="pat_typecodename" title="病人来源" width="70"
                                        header-align="center" :formatter="FormatData" align="center"></vxe-table-column>
                                    <vxe-table-column field="create_dt" title="创建时间" width="126" header-align="center"
                                        :formatter="['toDateString', 'yyyy-MM-dd HH:mm:ss']"></vxe-table-column>
                                    <vxe-table-column field="pat_no" title="病历号" width="85" header-align="center">
                                    </vxe-table-column>
                                    <vxe-table-column field="pat_name" title="姓名" width="50" header-align="center">
                                    </vxe-table-column>
                                    <vxe-table-column field="req_groupna" title="分单类别" width="106"
                                        header-align="center">
                                        <template v-slot="{ row }">
                                            <div v-bind:style="{ background: $pub.ColorChange(row.tube_color), color: $pub.colorConvert(row.tube_color) }"
                                                style="text-align: center">{{ row.req_groupna }}</div>
                                        </template>
                                    </vxe-table-column>
                                    <vxe-table-column field="barcode" title="条码号" width="107" header-align="center">
                                    </vxe-table-column>
                                    <vxe-table-column field="emer_flag" title="加急" width="45" header-align="center"
                                        align="center">
                                        <template v-slot="{ row }">
                                            <div style="color: red">{{ row.emer_flag == "1" ? "急" : "" }}</div>
                                        </template>
                                    </vxe-table-column>
                                    <vxe-table-column field="sample_items" title="申请项目(简称，部分)" width="150"
                                        header-align="center"></vxe-table-column>
                                    <vxe-table-column field="base_amount" title="应收金额" width="75" header-align="center"
                                        align="right"></vxe-table-column>
                                    <vxe-table-column field="req_stat" title="状态" width="74" header-align="center"
                                        align="center" :formatter="FormatData"></vxe-table-column>
                                    <vxe-table-column field="req_deptname" title="申请科室" width="100"
                                        header-align="center" align="center"></vxe-table-column>
                                    <vxe-table-column field="req_docname" title="申请人" width="60" header-align="center">
                                    </vxe-table-column>
                                    <vxe-table-column field="perform_deptname" title="执行科室" width="100"
                                        header-align="center"></vxe-table-column>
                                    <vxe-table-column field="req_bedno" title="床号" width="55" header-align="center">
                                    </vxe-table-column>
                                    <vxe-table-column field="specimen_name" title="标本类型" width="70"
                                        header-align="center"></vxe-table-column>
                                    <vxe-table-column field="pat_sexname" title="性别" width="40" header-align="center"
                                        align="center"></vxe-table-column>
                                    <vxe-table-column field="pat_agestr" title="年龄" width="50" header-align="center"
                                        align="center"></vxe-table-column>
                                    <vxe-table-column field="labadd" title="实验室添加标志" width="100" header-align="center"
                                        align="center">
                                        <template v-slot="{ row }">
                                            <el-checkbox v-model="row.labadd" true-label="1" false-label="0">
                                            </el-checkbox>
                                        </template>
                                    </vxe-table-column>
                                    <vxe-table-column :field="item.field" :title="item.title" :width="item.width"
                                        v-for="(item, index) in mainTableColumn" sortable v-bind:key="index"
                                        :formatter="FormatData" :align="item.align"> </vxe-table-column>
                                </vxe-table>
                            </div>
                            <div class="pagebottom">
                                <vxe-pager background size="small" :current-page="tablePage.currentPage"
                                    :page-size="tablePage.pageSize" :total="tablePage.total"
                                    :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                                    @page-change="handlePageChange"> </vxe-pager>
                            </div>
                        </div>
                    </rm-layout-right>

                    <el-dialog title="图形/图片文件查看" :visible.sync="PhotoDialogVisible" width="60%">
                        <div style="height: 400px; width: 100%">
                            <div style="border: 1px solid #ccc">
                                <div class="demo-image__placeholder">
                                    <div class="block" style="border-right: 1px solid #eff2f6">
                                        <span class="demonstration">{{ LPicName }}({{ LPicTime }})</span>
                                        <el-image :src="LPicData" style="width: 300px; height: 300px"
                                            :preview-src-list="arrLPicData"></el-image>
                                    </div>
                                    <div class="block">
                                        <span class="demonstration">{{ RPicName }}({{ LPicTime }})</span>
                                        <el-image :src="RPicData" style="width: 300px; height: 300px"
                                            :preview-src-list="arrRPicData"></el-image>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-dialog>

                    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="报告预览"
                        :visible.sync="printview" width="1200px">
                        <div v-html="htmlstr"></div>
                    </el-dialog>

                    <!--多选弹窗--->
                    <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false"
                        :title="dlgTitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
                        <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname"
                            @change="closedialog">
                        </rm-SqlMultiple>
                    </el-dialog>

                    <!--导出选择弹窗--->
                    <el-dialog width="300px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false"
                        title="导出数据选择" :visible.sync="selectDialogVisible" :destroy-on-close="true">
                        <table>
                            <tr>
                                <td>
                                    <el-radio-group v-model="exportType" size="mini">
                                        <el-radio label="1">全部数据</el-radio>
                                        <el-radio label="2">勾选数据</el-radio>
                                    </el-radio-group>
                                </td>
                            </tr>
                        </table>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="CommitExport()">确 定</el-button>
                            <el-button @click="CancelExport()">取 消</el-button>
                        </span>
                    </el-dialog>
                </rm-layout-left>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
XEUtils.mixin({
    // 自定义全局的格式化处理函数
    formatSelect(cellValue, list) {
        let item = list.find((item) => item.value == cellValue);
        return item ? item.label : "";
    },
});
export default {
    name: "REQ141",
    data() {
        return {
            parentData: {},
            sqlstr: "",
            printview: false,
            loading: false,
            htmlstr: "",
            LPicData: "",
            RPicData: "",
            LPicTime: "",
            RPicTime: "",
            LPicName: "",
            RPicName: "",
            arrLPicData: [],
            arrRPicData: [],
            PhotoDialogVisible: false,
            create_startdt: "2017-09-12",
            create_enddt: "",
            collectSampleStartdt: "",
            collectSampleenddt: "",
            txtpatno: "",
            specimenval:"",
            txtstatus: "",
            txtemerfalg: "",
            txtpatcardno: "",
            statusOptions: [],
            patTypeOptions: [],
            userOption: [],
            emerfalgOptions: [
                { label: "全部", value: "" },
                { label: "普通", value: "0" },
                { label: "加急", value: "1" },
            ],
            txtpattype: "",
            txtpatname: "",
            txtbarcode: "",
            hospitalval: "",
            reqdeptval: "",
            exedeptval: "",
            reqgroupval: "",
            userinfoval: "",
            reqitemval: "",
            txtdocname: "",
            back_txtbarcode: "",
            selectConfig: {
                tigger: "row",
            },
            key_barcode: "",
            fieldname: "",
            dlgTitle: "",
            option1: [],
            option2: [],
            dialogMultipleVisible: false,
            labgroupval:"",
            labgroupOption: [],
            onlylocalwindow: "",
            callwindow: "",
            mainTableColumn: [
                // { type: "selection", width: 40, align: "center" },
                // { field: "pat_typecode", title: "病人来源", width: 70 },
                // { field: "create_dt", title: "创建时间", width: 140 },
                // { field: "pat_no", title: "病历号", width: 100 },
                // { field: "pat_name", title: "姓名", width: 60 },
                // { field: "req_groupna", title: "分单类别", width: 100 },
                // { field: "barcode", title: "条码号", width: 100 },
                // { field: "emer_flag", title: "加急", width: 40 },
                // { field: "sample_items", title: "申请项目(简称，部分}", width: 150 },
                // { field: "base_amount", title: "应收金额", width: 70 },
                // { field: "req_stat", title: "状态", width: 80 },
                // { field: "req_deptname", title: "申请科室", width: 100 },
                // { field: "req_docname", title: "申请医生", width: 70 },
                // { field: "perform_deptname", title: "执行科室", width: 100 },
                // { field: "req_bedno", title: "床号", width: 55 },
                // { field: "specimen_name", title: "标本类型", width: 70 },
                // { field: "pat_sex", title: "性别", width: 40 },
                // { field: "pat_agestr", title: "年龄", width: 50 },
                // { field: "labadd", title: "实验室添加标志", width: 110 },
                { field: "create_user", title: "创建人", width: 60, align: "center" },
                { field: "print_dt", title: "打印/执行时间", width: 120 },
                { field: "print_user", title: "打印/执行人", width: 80, align: "center" },
                { field: "print_count", title: "打印次数", width: 75 },
                { field: "sampled_dt", title: "采样时间", width: 120, align: "center" },
                { field: "sampled_user", title: "采样人", width: 60, align: "center" },
                { field: "req_dt", title: "申请时间", width: 120, align: "center" },
                { field: "prereport_dt", title: "预出报告时间", width: 120 },
                { field: "prereport_comm", title: "报告领取说明", width: 120 },
                { field: "pat_diag", title: "临床诊断", width: 100 },
                { field: "pat_id", title: "病人ID号", width: 90 },
                { field: "inp_date", title: "入院日期", width: 90 },
                { field: "send_dt", title: "送出时间", width: 100 },
                { field: "send_user", title: "送出人", width: 60 },
                { field: "recieve_dt", title: "接收时间", width: 90, align: "center" },
                { field: "recieve_user", title: "接收人", width: 60, align: "center" },
                { field: "charge_dt", title: "计价时间", width: 90, align: "center" },
                { field: "charge_user", title: "计价人", width: 60, align: "center" },
                { field: "amount", title: "实收金额", width: 70, align: "right" },
                { field: "charge_flag", title: "计价标志", width: 70 },
                { field: "test_dt", title: "上机时间", width: 90 },
                { field: "test_user", title: "上机人", width: 60, align: "center" },
                { field: "report_dt", title: "报告时间", width: 90 },
                { field: "report_username", title: "检验医生姓名", width: 100 },
                { field: "rechk_username", title: "核对医生姓名", width: 100 },
                { field: "alter_flag", title: "报警", width: 40 },
                { field: "saleman", title: "销售员", width: 60 },
                { field: "pat_cardno", title: "就诊卡号", width: 100 },
                { field: "req_comm", title: "医生备注", width: 100 },
                { field: "pat_birth", title: "生日", width: 90, align: "center" },
                { field: "pat_ageyear", title: "年龄岁数", width: 70 },
                { field: "inp_id", title: "住院标识/就诊号", width: 110 },
                { field: "pat_diag_icd", title: "诊断标准代码", width: 110 },
                { field: "pat_address", title: "地址", width: 100 },
                { field: "pat_nation", title: "国籍", width: 100 },
                { field: "pat_idcardno", title: "身份证号/护照号", width: 150 },
                { field: "pat_phone", title: "联系电话", width: 100 },
                //{field:"charge_typeno",title:"费别代码",width:90},//dc_chargetype
                { field: "chargetypename", title: "费别", width: 100 }, //dc_chargetype
                { field: "req_wardno", title: "病区代码", width: 100 },
                { field: "original_reqno", title: "原始申请单号", width: 120 },
                { field: "secrecy", title: "加密", width: 60 },
                { field: "other_stat", title: "其他状态", width: 80 },
                { field: "cancel_dt", title: "作废时间", width: 90 },
                { field: "cancel_user", title: "作废人", width: 60 },
                { field: "reject_dt", title: "踢回时间", width: 75 },
                { field: "reject_count", title: "踢回次数", width: 80, align: "center" },
                { field: "specimen_code", title: "标本类型代码", width: 90 },
                { field: "sample_detail", title: "标本备注说明", width: 100 },
                { field: "req_reason", title: "检验目的", width: 100 },
                { field: "master_barcode", title: "主申请单ID", width: 90 },
                { field: "multi_seq", title: "子申请单序号", width: 90 },
                { field: "req_groupid", title: "分单类别ID", width: 90, align: "center" },
                { field: "report_id", title: "报告单ID", width: 90 },
                { field: "report_user", title: "检验医生代码", width: 100 },
                { field: "rechk_user", title: "核对医生代码", width: 100 },
                { field: "recieve1_dt", title: "工作组签收时间", width: 100 },
                { field: "recieve1_user", title: "工作组签收", width: 90 },
                { field: "inlib_status", title: "入库状态", width: 90 },
                { field: "library_id", title: "所在库位ID", width: 90 },
                { field: "reqtype", title: "申请单类别", width: 80, align: "center" },
                { field: "pat_height", title: "身高（cm）", width: 90 },
                { field: "weight", title: "体重（kg）", width: 90 },
                { field: "abo_bldtype", title: "ABO血型", width: 90 },
                { field: "rh_bldtype", title: "RH血型", width: 90 },
                // {field:"tube_color",title:"试管颜色",width:100},
                { field: "collectbarcode", title: "回单条码", width: 100 },
                { field: "computername", title: "采样电脑名", width: 100 },
                { field: "macaddr", title: "采样电脑MAC", width: 100 },
                { field: "queuearea", title: "采样/排队区域", width: 100 },
                { field: "realcollectuser", title: "实际采样人", width: 90 },
                { field: "realcollecttime", title: "实际采样时间", width: 120 },
                { field: "appraise", title: "采样评价", width: 100 },
            ],
            mainTableData: [],
            tableColumn2: [],
            tableData2: [],
            tableColumn3: [],
            tableData3: [],
            reqitem: [],
            selrow: [],
            interfacename: "",
            barcodestyle: "",
            cxbarcodeprinter: "",
            bPrintBackBill: false,
            cx_backrpt_style: "",
            pbackmode: "1",
            cx_backrrintername: "",
            cx_printbackrpt: "",
            tablePage: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
            },
            keyConfig: {
                isEdit: true,
            },
            keyLocalConfig: {
                isArrow: true,
                isDel: true,
                isTab: true,
            },
            noprintbarcodercv: "0", //已接收标本禁止重打条码
            jsonObj: [
                { text: "申请科室", groupName: "医院信息", returnParm: "reqdeptval", val: "", component: "rm-ddl-common", pops: { dataname: "科室", datatype: "dept" } },
                { text: "采样用户", groupName: "检测信息", returnParm: "userinfoval", val: "", component: "rm-ddl-common", pops: { dataname: "用户", datatype: "userinfo" } },
                { text: "病人姓名", groupName: "病人信息", returnParm: "txtpatname", val: "", component: "el-input", pops: { style: "width: 200px" } },
                { text: "分单类别", groupName: "医院信息", returnParm: "reqgroupval", val: "", component: "rm-ddl-common", pops: { datatype: "reqgroup", dataname: "分单类别" } },
                { text: "执行科室", groupName: "医院信息", returnParm: "exedeptval", val: "", component: "rm-ddl-common", pops: { datatype: "dept", dataname: "科室" } },
                { text: "送检医院", groupName: "医院信息", returnParm: "hospitalval", val: "", component: "rm-ddl-common", pops: { dataname: "医院", datatype: "hospital" } },

                { text: "申请项目", groupName: "检测信息", dblclickparm: "reqitemval", returnParm: "reqitemval", component: "el-select", val: "", pops: { style: "width: 200px", placeholder: "请选择", clearable: true, filterable: true }, selectOptions: [] },

                // { text: "申请项目", groupName: "检测信息", returnParm: "reqitemval", component: "rm-ddl-common", pops: { dataname: "申请项目", datatype: "reqitem" } },

                { text: "申请医生", groupName: "医院信息", returnParm: "txtdocname", component: "rm-ddl-common", val: "", pops: { dataname: "医生", datatype: "doctor" } },
                { text: "病人卡号", groupName: "病人信息", returnParm: "txtpatcardno", component: "el-input", val: "", pops: { style: "width: 200px" } },

                {
                    text: "加急标志", groupName: "检测信息", returnParm: "txtemerfalg", component: "el-select", val: "", pops: { style: "width: 200px" }, selectOptions: [
                        { label: "全部", value: "" },
                        { label: "普通", value: "0" },
                        { label: "加急", value: "1" },]
                },
                { text: "病人类型", groupName: "病人信息", returnParm: "txtpattype", component: "el-select", val: "1", pops: { style: "width: 200px" }, selectOptions: [] },
                { text: "申请状态", groupName: "检测信息", returnParm: "txtstatus", component: "el-select", val: "", pops: { style: "width: 200px" }, selectOptions: [] },
            ],
            selectDialogVisible: false,
            exportType: "1",
        };
    },
    created() {
        //this.InitPageDate(); //初始化主列表
        this.DetailQuery(""); //初始化明细列表
        this.InitDate(); //初始化时间
        this.ddlInitData(); //初始化下拉框的数据
        this.InitOptions(); //初始化选项数据
    },
    watch: {},
    mounted() {
        if (this.$route.query.istoday) {
            this.create_startdt = "";
            this.create_enddt = "";
            this.collectSampleStartdt = XEUtils.toDateString(new Date(), "yyyy-MM-dd 00:00:00");
            this.collectSampleenddt = XEUtils.toDateString(new Date(), "yyyy-MM-dd 23:59:59");
            this.userinfoval = this.$route.query.userinfoval;
            this.InitPage();
        }
    },
    updated() { },
    methods: {
        // getMeVal(data){
        //     this.reqdeptval=data[0].val;
        //     this.userinfoval=data[1].val;
        //     this.txtpatname=data[2].val;
        //     this.reqgroupval=data[3].val;
        //     this.exedeptval=data[4].val;
        //     this.hospitalval=data[5].val;
        //     this.reqitemval=data[6].val;
        //     this.txtdocname=data[7].val;
        //     this.txtpatcardno=data[8].val;
        //     this.txtemerfalg=data[9].val;
        //     this.txtpattype=data[10].val;
        //     this.txtstatus=data[11].val;
        //     console.log(data);

        //     this.tablePage.currentPage = 1;
        //     this.InitPage();
        // },
        InitPage() {
            this.loading = true;
            var AdvancedSearch = this.$refs.rm_AdvancedSearch.getSerchData();
            console.log(AdvancedSearch);
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ141",
                    method: "post",
                    data: {
                        action: "query",
                        create_startdt: this.create_startdt,
                        create_enddt: this.create_enddt,
                        txtpatno: this.txtpatno,
                        specimenval:this.specimenval,
                        txtbarcode: this.txtbarcode,
                        back_txtbarcode: this.back_txtbarcode,
                        collectSampleStartdt: this.collectSampleStartdt,
                        collectSampleenddt: this.collectSampleenddt,

                        reqdeptval: AdvancedSearch.reqdeptval,
                        userinfoval: AdvancedSearch.userinfoval,
                        txtpatname: AdvancedSearch.txtpatname,
                        reqgroupval: AdvancedSearch.reqgroupval,
                        exedeptval: AdvancedSearch.exedeptval,
                        hospitalval: AdvancedSearch.hospitalval,
                        reqitemval: AdvancedSearch.reqitemval,
                        txtdocname: AdvancedSearch.txtdocname,
                        txtpatcardno: AdvancedSearch.txtpatcardno,
                        txtemerfalg: AdvancedSearch.txtemerfalg,
                        txtpattype: AdvancedSearch.txtpattype,
                        txtstatus: AdvancedSearch.txtstatus,

                        pagesize: this.tablePage.pageSize,
                        currentpage: this.tablePage.currentPage,
                        ispage: "1",

                        exporttype:"",
                        selbarcodes:"",

                        labgroupval:this.labgroupval,
                        onlylocalwindow : this.onlylocalwindow,
                        callwindow : this.callwindow,
                    },
                })
                .then((res) => {
                    this.sqlstr = res.pagesql;
                    this.tablePage.total = res.RData.total;
                    let cData = res.RData.Data;
                    this.mainTableData = cData;
                    this.$refs.reftxtpatno.focus();
                    this.$refs.reftxtpatno.select();
                    if (cData && cData.length > 0) {
                        //查询
                        this.selrow = cData[0];
                    } else {
                        this.selrow = null;
                    }
                    if (this.$refs.xTable1) {
                        if (this.selrow) {
                            this.$refs.xTable1.setCurrentRow(this.selrow);
                        }
                        this.currentChangeEventFun(this.selrow);
                    }
                    this.loading = false;
                })
                .catch((e) => {
                    this.loading = false;
                    console.log("erro", e);
                });
        },
        checkMethod({ row, column }) {
            if (row.req_stat == "9") {
                return false;
            } else {
                return true;
            }
        },
        SelectChange(selection) {
            // if (selection.row.req_stat >= "4" && this.noprintbarcodercv == "1" && selection.checked) {
            //     this.$message.warning("已接收标本禁止重打条码！");
            //     setTimeout(() => {
            //         this.$refs.xTable1.toggleRowSelection(selection.row);
            //     }, 10);
            // }
        },
        SelectAll(selection) {
            // let val = "0";
            // selection.selection.forEach((item) => {
            //     if (item.req_stat >= "4" && this.noprintbarcodercv == "1" && selection.checked) {
            //         val = "1";
            //         setTimeout(() => {
            //             this.$refs.xTable1.toggleRowSelection(item);
            //         }, 10);
            //     }
            // });
            // if (val == "1") this.$message.warning("已接收标本禁止重打条码！");
        },
        async InitOptions() {
            try {
                const res = await this.$tool.request({
                    url: "REQ/REQ1/REQ141",
                    method: "post",
                    data: {
                        action: "InitOptions",
                    },
                });
                this.interfacename = res.readcardcmdline;
                this.barcodestyle = res.barcodestyle;
                this.cxbarcodeprinter = res.cxbarcodeprinter;
                this.cx_printbackrpt = res.cx_printbackrpt;
                if (this.cx_printbackrpt == "1") this.bPrintBackBill = true;
                this.cx_backrpt_style = res.cx_backrpt_style;
                this.pbackmode = res.backbarmode;
                this.cx_backrrintername = res.cx_backrrintername;
                this.noprintbarcodercv = res.noprintbarcodercv;

                this.onlylocalwindow = res.onlylocalwindow;
                this.callwindow = res.callwindow;
            } catch (err) {
                console.log(err);
            }
        },
        CurrentChangeEvent({ row }) {
            this.currentChangeEventFun(row);
        },
        RightButtomCurrentChangeEvent() { },
        RightTopCurrentChangeEvent() { },
        currentChangeEventFun(row) {
            if (row) {
                this.key_barcode = row.barcode;
                this.DetailQuery(row.barcode);
            } else {
                this.key_barcode = "";
                this.DetailQuery("");
            }
        },
        DetailQuery(barcode) {
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ141",
                    method: "post",
                    data: {
                        action: "DetailQuery",
                        barcode: barcode,
                    },
                })
                .then((res) => {
                    var collist1 = [
                        {
                            title: "NO.",
                            type: "index",
                            align: "center",
                            width: 40,
                        },
                    ];
                    var collist2 = [
                        {
                            title: "NO.",
                            type: "index",
                            align: "center",
                            width: 40,
                        },
                    ];
                    for (let i = 0, len = res.RData1.Cols.length; i < len; i++) {
                        let colitem1 = {};
                        const item = res.RData1.Cols[i];
                        colitem1 = {
                            field: item.field,
                            title: item.title,
                            width: item.width,
                            sortable: true,
                            formatter: this.FormatData,
                        };
                        collist1.push(colitem1);
                    }
                    for (let i = 0, len = res.RData2.Cols.length; i < len; i++) {
                        let colitem2 = {};
                        const item = res.RData2.Cols[i];
                        colitem2 = {
                            field: item.field,
                            title: item.title,
                            width: item.width,
                            sortable: true,
                            formatter: this.FormatData,
                        };
                        collist2.push(colitem2);
                    }
                    this.tableColumn2 = collist1;
                    this.tableData2 = res.RData1.Data;
                    this.tableColumn3 = collist2;
                    this.tableData3 = res.RData2.Data;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        BtnQuery() {
            this.tablePage.currentPage = 1;
            this.InitPage();
            //this.$refs.xTable1.commitProxy("query");
        },
        handlePageChange({ currentPage, pageSize }) {
            this.tablePage.currentPage = currentPage;
            this.tablePage.pageSize = pageSize;
            this.InitPage();
        },
        FormatData({ cellValue, row, column }) {
            let arrdt = ["prereport_dt", "inp_date", "send_dt", "recieve_dt", "charge_dt", "test_dt", "report_dt", "cancel_dt", "reject_dt", "recieve1_dt", "realcollecttime", "pat_birth", "add_dt"];
            let arrdttm = ["log_date", "print_dt", "sampled_dt", "req_dt"];
            let arruser = ["print_user", "sampled_user", "send_user", "recieve_user", "charge_user", "test_user"];
            if (column.property == "reqtype") {
                if (row.reqtype == "C") {
                    return "检验";
                } else if (row.reqtype == "H") {
                    return "输血";
                }
            } else if (column.property == "emer_flag") {
                if (row.emer_flag == 1) {
                    return "急";
                } else {
                    return "";
                }
            } else if (arrdt.indexOf(column.property) > -1) {
                return XEUtils.toDateString(cellValue, "yyyy-MM-dd HH:mm:ss");
            } else if (column.property == "pat_typecode") {
                try {
                    let obj = this.patTypeOptions.find((m) => m.value == row.pat_typecode);
                    if (obj != undefined) {
                        return obj.label;
                    } else {
                        return cellValue;
                    }
                } catch (e) {
                    return cellValue;
                }
            } else if (arrdttm.indexOf(column.property) > -1) {
                return XEUtils.toDateString(cellValue, "yyyy-MM-dd HH:mm:ss");
            } else if (column.property == "pat_sex") {
                if (row.pat_sex == "1") {
                    return "男";
                } else if (row.pat_sex == "2") {
                    return "女";
                } else {
                    return cellValue;
                }
            } else if (column.property == "req_stat") {
                try {
                    if (row.req_stat != "") {
                        return this.statusOptions.find((m) => m.value == row.req_stat).label;
                    } else {
                        return cellValue;
                    }
                } catch (e) {
                    return cellValue;
                }
            } else if (arruser.indexOf(column.property) > -1) {
                try {
                    let obj = this.userOption.find((m) => m.userno == cellValue);
                    if (obj != undefined) {
                        return obj.username;
                    } else {
                        return cellValue;
                    }
                } catch (e) {
                    return cellValue;
                }
            } else if (column.property == "alter_flag") {
                if (row.alter_flag == "1") {
                    return "警";
                } else {
                    return "";
                }
            } else {
                return cellValue;
            }
        },
        cellClassName({ column, row, columnIndex }) {
            if (column.property == "emer_flag") {
                return "font-red";
            } else if (column.property == "req_stat") {
                return this.$pub.getreqstatclass(row.req_stat);
            } else {
                return "";
            }
        },
        BtnClear() {
            this.InitDate();
            this.txtpatno = "";
            this.specimenval="";
            this.txtstatus = "";
            this.reqdeptval = "";
            this.userinfoval = "";
            this.txtbarcode = "";
            this.txtpatname = "";
            this.reqgroupval = "";
            this.exedeptval = "";
            this.hospitalval = "";
            this.reqitemval = "";
            this.txtdocname = "";
            this.txtpattype = "";
            this.back_txtbarcode = "";
            this.txtpatcardno = "";
            this.collectSampleStartdt = "";
            this.collectSampleenddt = "";
            this.txtemerfalg = "";
            this.tableData2 = [];
            this.tableData3 = [];
            this.mainTableData = [];
            //清除高级查询组件搜索条件
            this.$refs.rm_AdvancedSearch.cleaSerchData();
        },
        ShowSelectDialog(){
            this.selectDialogVisible = true;
        },
        CommitExport(){
            this.BtnExport();
            this.selectDialogVisible = false;
        },
        CancelExport(){
            this.selectDialogVisible = false;
        },
        BtnExport() {
            var selbarcodes = "";
            if(this.exportType=="2"){
                var selData=this.$refs.xTable1.getSelectRecords();
                if(selData==null || selData.length==0){
                    this.$message.error("请选择要导出的数据");
                    return;
                }
                for(var i=0;i<selData.length;i++){
                    selbarcodes+="'"+selData[i].barcode+"',";
                }
                if(!!selbarcodes){
                    selbarcodes="("+selbarcodes.substring(0,selbarcodes.length-1)+")";
                }
            }
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ141",
                    method: "post",
                    data: {
                        action: "query",
                        create_startdt: this.create_startdt,
                        create_enddt: this.create_enddt,
                        txtpatno: this.txtpatno,
                        specimenval:this.specimenval,
                        txtstatus: this.txtstatus,
                        reqdeptval: this.reqdeptval,
                        userinfoval: this.userinfoval,
                        txtbarcode: this.txtbarcode,
                        txtpatname: this.txtpatname,
                        reqgroupval: this.reqgroupval,
                        exedeptval: this.exedeptval,
                        hospitalval: this.hospitalval,
                        reqitemval: this.reqitemval,
                        txtdocname: this.txtdocname,
                        txtpattype: this.txtpattype,
                        back_txtbarcode: this.back_txtbarcode,
                        txtpatcardno: this.txtpatcardno,
                        collectSampleStartdt: this.collectSampleStartdt,
                        collectSampleenddt: this.collectSampleenddt,
                        txtemerfalg: this.txtemerfalg,
                        pagesize: this.tablePage.pageSize,
                        currentpage: this.tablePage.currentPage,
                        ispage: "0",
                        exporttype:this.exportType,
                        selbarcodes:selbarcodes,
                    },
                })
                .then((res) => {
                    let cData = res.RData.Data;
                    // let cm = this.$refs.xTable1.getColumns();
                    let tableColumn = res.RData.Cols; //this.$refs.xTable1.getColumns();
                    // let extableColumn = [];
                    // tableColumn.forEach((item) => {
                    //     extableColumn.push({ title: item.title, field: item.property });
                    // });
                    this.$pub.exportTableExcel(cData, tableColumn, "REQ141 门诊采样查询.xlsx");
                })
                .catch((e) => {
                    this.loading = false;
                    console.log("erro", e);
                });
        },

        BtnRePrintBarcode() {
            this.RePrint_click("bar");
        },
        BtnRePrintReceipt() {
            this.RePrint_click("back");
        },
        RePrint_click(btype) {
            let cData = this.$refs.xTable1.getSelectRecords();
            if (cData.length < 1) {
                this.$message.warning("请选择要重打的数据！");
                return false;
            }
            let bcnt = cData.length;
            if (cData && cData.length > 0) {
                if (btype == "back") {
                    bcnt = 0;
                    let cbarno = ""; //回单号
                    for (let i = 0; i < cData.length; i++) {
                        let barcode = cData[i].collectbarcode;
                        if (barcode != null) {
                            if (cbarno == "") {
                                bcnt = bcnt + 1;
                                cbarno = barcode;
                            }
                            else if (cbarno.indexOf(barcode) == -1) {
                                bcnt = bcnt + 1;
                                // if (cbarno == "") {
                                //     cbarno = barcode;
                                // } else {
                                cbarno = cbarno + "," + barcode;
                                //}
                            }
                        }
                    }
                    this.$confirm("本次共(" + bcnt + "张）回执单，确定要重打吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        focusCancelButton: true,
                        closeOnClickModal: false,
                        type: "warning",
                    })
                        .then(() => {
                            this.printbarcode(cbarno, "back");
                        })
                        .catch(() => { });
                } else {
                    var selbarcode = "";
                    for (let index = 0; index < cData.length; index++) {
                        const element = cData[index];
                        if (element.req_stat >= "4" && this.noprintbarcodercv == "1") {
                            selbarcode += element.barcode + ",";
                        }
                    }
                    if (selbarcode != "") {
                        this.$message.error("如下已接收标本禁止重打条码：" + selbarcode.trimEnd(','));
                        return false;
                    }
                    else {
                        this.$confirm("本次共" + bcnt + "张条码，确定要重打吗?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            focusCancelButton: true,
                            closeOnClickModal: false,
                            type: "warning",
                        })
                            .then(() => {
                                this.RePrintBarcodes(cData, 0);
                            })
                            .catch(() => { });
                    }
                }
            } else {
                this.$alert("至少选择一个要重打的条码！", "请选择", {
                    confirmButtonText: "确定",
                });
            }
        },
        RePrintBarcodes(cData, i) {
            if (i >= cData.length) {
                return;
            } else {
                let barcode = cData[i].barcode;
                this.$tool
                    .request({
                        url: "REQ/REQ1/REQ141",
                        method: "post",
                        data: {
                            action: "checkbarcode",
                            barcode: barcode,
                        },
                    })
                    .then((res) => {
                        if (res.flag == "0") {
                            if (cData[i].req_stat != "1" && cData[i].req_stat != "2") {
                                this.$confirm("条码号:" + barcode + "(" + cData[i].req_groupna + ")， 状态是【" + this.statusOptions.find((m) => m.value == cData[i].req_stat).label + "】，您是否要继续重打条码?", "提示", {
                                    confirmButtonText: "确定",
                                    cancelButtonText: "取消",
                                    focusCancelButton: true,
                                    closeOnClickModal: false,
                                    type: "warning",
                                })
                                    .then(() => {
                                        this.printbarcode(barcode, "bar");
                                    })
                                    .catch(() => { });
                            } else {
                                this.printbarcode(barcode, "bar");
                            }
                        } else this.$message.warning("已接收标本禁止重打条码！");
                    })
                    .catch((e) => {
                        this.$message.error(e);
                    });
                this.RePrintBarcodes(cData, i + 1);
            }
        },
        printbarcode(barcodestr, ptype) {
            if (ptype == "bar") {
                if (barcodestr != null && barcodestr != "") {
                    if (this.barcodestyle != "") {
                        this.$pub.printbarcode(this, barcodestr, "1", this.barcodestyle, this.cxbarcodeprinter, "1");
                    } else {
                        this.$alert("没有设置条码的打印样式", "错误", {
                            confirmButtonText: "确定",
                        });
                    }
                }
            } else if (ptype == "back") {
                if (this.cx_backrpt_style != "") {
                    if (barcodestr.indexOf(",") > -1) {
                        barcodestr.split(",").forEach((item) => {
                            if (item != "") {
                                this.$pub.printbackbar(this, item, "1", this.cx_backrpt_style, this.pbackmode, this.cx_backrrintername);
                            }
                        });
                    } else {
                        this.$pub.printbackbar(this, barcodestr, "1", this.cx_backrpt_style, this.pbackmode, this.cx_backrrintername);
                    }
                } else {
                    this.$alert("没有设置回执单的打印样式", "错误", {
                        confirmButtonText: "确定",
                    });
                }
            }
        },
        BtnLookPic() {
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ141",
                    method: "post",
                    data: {
                        action: "BtnLookPic",
                        barcode: this.key_barcode,
                    },
                })
                .then((res) => {
                    this.LPicName = res[0].Item1;
                    this.LPicTime = res[0].Item2;
                    this.LPicData = res[0].Item3;
                    this.arrLPicData.push(res[0].Item3);
                    this.RPicName = res[1].Item1;
                    this.RPicTime = res[1].Item2;
                    this.RPicData = res[1].Item3;
                    this.arrRPicData.push(res[1].Item3);
                    this.PhotoDialogVisible = true;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        BtnSamplingReceipt() { },
        InitDate() {
            this.create_startdt = this.$pub.InitDateTime2(0).datefrom;
            this.create_enddt = this.$pub.InitDateTime2(0).dateto;
        },
        ddlInitData() {
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ141",
                    method: "post",
                    data: {
                        action: "ddlInitData",
                    },
                })
                .then((res) => {
                    this.statusOptions = res.dt1;
                    this.patTypeOptions = res.dt2;
                    this.interfacename = res.opt; //调用读卡exe
                    this.userOption = res.userlist; //中文显示名字
                    this.reqitem = res.reqitem;//申请项目
                    var options = [];
                    if (res.reqitem.length > 0) {
                        res.reqitem.forEach(element => {
                            options.push({ label: element.display, value: element.data });
                        });
                    }
                    this.jsonObj[6].selectOptions = options;
                    this.jsonObj[10].selectOptions = res.dt2;
                    this.jsonObj[11].selectOptions = res.dt1;
                    this.labgroupOption = res.labgroupOption;//采样人所属工作组
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        openDialog(parm) {
            switch (parm) {
                case "reqitemval":
                    this.popMultipleChk(this.reqitemval, 'reqitemval', this.reqitem, '申请项目选择');
                    break;
            }
        },
        popMultipleChk(e, fieldname, option, title) {
            let temp = XEUtils.clone(option, true);
            this.option1 = [];
            this.option2 = [];
            if (e != "") {
                let k = e.split(",");
                k.forEach((item) => {
                    let ndata = temp.find((m) => m.data == item);
                    if (ndata != undefined && ndata != null) {
                        this.option2.push(ndata);
                    }
                });
                temp.forEach((item) => {
                    if (k.indexOf(item.data + "") < 0) {
                        this.option1.push(item);
                    }
                });
            } else {
                this.option1 = temp;
            }
            this.fieldname = fieldname;
            this.dlgTitle = title;
            this.dialogMultipleVisible = true;
        },
        closedialog(value, name) {
            if (value != "close") {
                this[name] = value;
            }
            this.dialogMultipleVisible = false;
            //把返回结果传回高级查询组件
            this.$refs.rm_AdvancedSearch.postDialogData("reqitemval", value);
        },
        colorConvert(color) {
            let c = this.getColor(color);
            if (color == null || color == "") {
                return "#000000";
            } else {
                if (c < 128) {
                    return "#FFFFF0";
                } else {
                    return "#000000";
                }
            }
        },
        getColor(number) {
            let color = number;
            const blue = parseInt(color % 0x100, 10);
            color = color >>> 8;
            const green = parseInt(color % 0x100, 10);
            color = color >>> 8;
            const red = parseInt(color % 0x100, 10);
            const alpha = (parseInt(color >>> 8, 10) / 0xff).toFixed(1);
            let k = (blue + green + red) / 3;
            return k; //`rgba(${red}, ${green}, ${blue}, ${alpha})`;
        },
        //10转16
        ColorChange(color) {
            if (color != null) {
                var tempcolor = color.toString(16);
                var num = 6 - tempcolor.length;
                var result = tempcolor;
                if (num > 0) {
                    for (let i = 0; i < num; i++) {
                        result = "0" + result;
                    }
                }
                var resultarr = result.split("");
                var r1 = resultarr[0];
                var r2 = resultarr[1];
                resultarr[0] = resultarr[4];
                resultarr[1] = resultarr[5];
                resultarr[4] = r1;
                resultarr[5] = r2;
                result = resultarr.join("");
                return result;
            } else {
                return "";
            }
        },
        //16转10
        ColorTrans(color) {
            var result = color;
            var resultarr = result.split("");
            var r1 = resultarr[0];
            var r2 = resultarr[1];
            resultarr[0] = resultarr[4];
            resultarr[1] = resultarr[5];
            resultarr[4] = r1;
            resultarr[5] = r2;
            if (resultarr.length > 0) {
                let k = parseInt(resultarr.join(""), 16);
                return k;
            } else {
                return "";
            }
        },
        BtnPrint() {
            let sql = btoa(encodeURIComponent(this.sqlstr));
            jsObj.PrintCustomReport("1000", sql, "lis", "req_master", "");
        },
        BtnJustify() {
            let sql = btoa(encodeURIComponent(this.sqlstr));
            jsObj.SetCustomPrintConfig("1000", sql, "lis", "req_master");
        },
        BtnPreView() {
            let sql = btoa(encodeURIComponent(this.sqlstr));
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ141",
                    method: "post",
                    data: {
                        action: "customprintview",
                        styleid: "1000",
                        sql: sql,
                        tablename: "req_master",
                    },
                })
                .then((res) => {
                    this.printview = true;
                    this.htmlstr = res;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        BtnReadCard() {
            this.$pub
                .readcard(this, this.interfacename)
                .then((res) => {
                    this.txtpatno = res;
                    if (this.txtpatno == "") {
                        return false;
                    }
                    this.BtnQuery();
                })
                .catch((e) => { });
            // if (typeof jsObj != "undefined") {
            //     this.txtpatno = jsObj.ReadCard(this.interfacename);
            //     if (this.txtpatno == "") {
            //         return false;
            //     }
            //     this.BtnQuery();
            // } else {
            //     this.$alert("请使用" + this.$pub.clientname + "打开系统", "错误", {
            //         confirmButtonText: "确定",
            //     });
            // }
        },
        txtfocus(refname) {
            this.$refs[refname].select();
        },
    },
};
</Script>

<style scoped>
.pagetop {
    /*width: 100%;
    height: 130px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;*/
    left: 0;
    right: 0;
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    height: 105px;
    overflow-x: auto;
    overflow-x: overlay;
}

.pagetopother {
    /* width: 100%;
    height: 160px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;*/
    left: 0;
    right: 0;
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    height: 160px;
    overflow-x: auto;
    overflow-x: overlay;
}

.pagecenter {
    position: absolute;
    top: 110px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.pagecenterother {
    position: absolute;
    top: 165px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.middle-right {
    position: absolute;
    height: 100%;
    width: 500px;
    right: 0px;
}

.pagemain {
    position: absolute;
    height: 90%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 40px;
}

.pagemainother {
    position: absolute;
    height: 90%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 40px;
}

.pagebottom {
    position: absolute;
    height: 45px;
    left: 0px;
    right: 0px;
    overflow: visible;
    bottom: 0px;
    z-index: 999;
}

.demo-image__placeholder .block {
    top: 20px;
    padding: 20px 0;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}

.block,
.demo-image__placeholder .block {
    width: 49%;
}

.demo-image .demonstration,
.demo-image__error .demonstration,
.demo-image__placeholder .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
}

.btnStyle {
    margin-left: 2px;
}

::v-deep .vxe-table .vxe-body--column.font-red {
    color: red;
    font-weight: 800;
}

::v-deep .el-input-group__append,
.el-input-group__prepend {
    background-color: #0095d9;
    color: #f1f2f4;
}

table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}

.operation-list {
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

::-webkit-scrollbar {
    width: 0px;
    height: 5px;
    border: 4px solid white;
}

::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    display: block;
    border-style: solid;
    height: 5px;
    width: 5px;
}

/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
    margin-right: 2px;
    border-width: 4px 4px 4px 0;
    border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
    background-color: #000000;
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}

/* Right */
::-webkit-scrollbar-button:horizontal:increment {
    margin-left: 2px;
    border-width: 4px 0 4px 4px;
    border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
    background-color: #000000;
}

::-webkit-scrollbar-button:horizontal:increment:hover {
    border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}
</style>